<!DOCTYPE html>
<!-- saved from url=(0127)https://docs.google.com/document/d/e/2PACX-1vSR5gce7ehdIUuodk3twhfc4xhndQbV9WmMOSxIiA9-IdSuNDCHIGRDfCHN1OB6c-IM_bvlYSsuI_Ko/pub -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>WebPerfWG call - September 16th 2021</title><link rel="shortcut icon" href="https://ssl.gstatic.com/docs/documents/images/kix-favicon7.ico"><meta name="referrer" content="strict-origin-when-cross-origin"><style type="text/css" nonce="">
      @import url("https://fonts.googleapis.com/css?family=Google+Sans");
      @import url("https://fonts.googleapis.com/css?family=Roboto");

      body {
        font-family: Roboto, arial, sans, sans-serif;
        margin: 0;
      }

      iframe {
        border: 0;
        frameborder: 0;
        height: 100%;
        width: 100%;
      }

      #banners {
        align-items: center;
        background: white;
        display: block;
        justify-content: space-between;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 100;
      }

      #banners #publish-banner {
        background-color: #e8f0fe;
        border-bottom: 1px #ccc solid;
        color: #202124;
        display: flex;
        flex: 1 1 0%;
        height: 60px;
        width: 100%;
      }

      #publish-banner-icon {
        display: flex;
        fill: #1967d2;
        margin: auto 20px;
      }

      #publish-banner-text {
        flex-grow: 1;
        margin: auto 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      #publish-banner-buttons {
        margin: auto 25px auto 0;
      }

      #publish-banner-buttons span {
        align-self: center;
        background-color: inherit;
        border: none;
        font-family: "Google Sans", Roboto, RobotoDraft, Helvetica, Arial, sans-serif;
        margin: 0 16px 0 32px;
      }

      #publish-banner-buttons a {
        color: #1967d2;
        cursor: pointer;
        font-family: "Google Sans", Roboto, RobotoDraft, Helvetica, Arial, sans-serif;
        font-size: 14px;
        font-weight: 500;
        line-height: 24px;
        text-decoration: none;
      }

      #banners #title-banner {
        background: white;
        border-bottom: 1px #ccc solid;
        display: flex;
        flex: 1 1 0%;
        height: 60px;
        width: 100%;
      }

      #banners #title-banner #title {
        flex-grow: 1;
        font-family: 'Google Sans';
        font-size: large;
        margin: auto 0 auto 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 70%;
      }

      #banners #title-banner #interval {
        margin: auto 25px auto 0;
        font-family: Roboto;
        font-size: small;;
      }

      #footer {
        background: #f0f0f0;
        border-bottom: 1px #ccc solid;
        bottom: 0;
        font-family: Roboto;
        font-size: small;
        padding: 10px 10px;
        position: fixed;
        text-align: center;
        width: 100%;
      }

      #contents {
        padding: 100px 20% 50px 20%;
      }

      @media only screen and (max-device-width: 800px) {
        #banners #title-banner {
          border-bottom-width: 5px;
          height: auto;
          display: block;
        }

        #banners #title-banner #title {
          font-size: 3em;
          margin: auto 0 auto 20px;
          width: 90%;
        }

        #banners #title-banner #interval {
          font-size: 1.5em;
          margin: 10px 0 auto 25px;
        }

        #contents {
          padding: 150px 5% 80px;
        }

        #footer {
          font-size: 2em;
        }
      }

      .dash {
        padding: 0 6px;
      }
    </style></head><body><div id="banners"><div id="publish-banner"><span id="publish-banner-icon"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"></path></svg></span><div id="publish-banner-text">Published using Google Docs</div><div id="publish-banner-buttons"><span><a target="_blank" title="Learn more" href="https://support.google.com/docs/answer/183965">Learn More</a></span><span><a href="https://docs.google.com/u/0/abuse?id=AKkXjoz-WiiUipIo9p1-gynimR0hEWfvprtVUaG5IqN1QbC0VBTqxPQQGoJzNVLbd-HCQHM2UpddJWIYOR430_c:0"></a></span></div></div><div id="title-banner"><div id="title">WebPerfWG call - September 16th 2021</div><div id="interval"><span></span></div></div></div><div id="contents"><style type="text/css">.lst-kix_m4i1hzmi1r81-8>li:before{content:"\0025a0  "}.lst-kix_cbdukoi9vimv-7>li:before{content:"\0025cb  "}.lst-kix_m4i1hzmi1r81-7>li:before{content:"\0025cb  "}.lst-kix_cbdukoi9vimv-6>li:before{content:"\0025cf  "}.lst-kix_m4i1hzmi1r81-6>li:before{content:"\0025cf  "}.lst-kix_m4i1hzmi1r81-5>li:before{content:"\0025a0  "}.lst-kix_cbdukoi9vimv-8>li:before{content:"\0025a0  "}ul.lst-kix_m4i1hzmi1r81-8{list-style-type:none}.lst-kix_cbdukoi9vimv-1>li:before{content:"\0025cb  "}.lst-kix_cbdukoi9vimv-2>li:before{content:"\0025a0  "}ul.lst-kix_m4i1hzmi1r81-6{list-style-type:none}ul.lst-kix_m4i1hzmi1r81-7{list-style-type:none}ul.lst-kix_m4i1hzmi1r81-4{list-style-type:none}ul.lst-kix_cbdukoi9vimv-0{list-style-type:none}.lst-kix_cbdukoi9vimv-3>li:before{content:"\0025cf  "}ul.lst-kix_m4i1hzmi1r81-5{list-style-type:none}ul.lst-kix_m4i1hzmi1r81-2{list-style-type:none}ul.lst-kix_m4i1hzmi1r81-3{list-style-type:none}ul.lst-kix_m4i1hzmi1r81-0{list-style-type:none}.lst-kix_cbdukoi9vimv-5>li:before{content:"\0025a0  "}ul.lst-kix_m4i1hzmi1r81-1{list-style-type:none}.lst-kix_cbdukoi9vimv-4>li:before{content:"\0025cb  "}ul.lst-kix_cbdukoi9vimv-4{list-style-type:none}ul.lst-kix_cbdukoi9vimv-3{list-style-type:none}ul.lst-kix_cbdukoi9vimv-2{list-style-type:none}ul.lst-kix_cbdukoi9vimv-1{list-style-type:none}ul.lst-kix_cbdukoi9vimv-8{list-style-type:none}.lst-kix_cbdukoi9vimv-0>li:before{content:"\0025cf  "}ul.lst-kix_cbdukoi9vimv-7{list-style-type:none}li.li-bullet-0:before{margin-left:-18pt;white-space:nowrap;display:inline-block;min-width:18pt}ul.lst-kix_cbdukoi9vimv-6{list-style-type:none}ul.lst-kix_cbdukoi9vimv-5{list-style-type:none}.lst-kix_m4i1hzmi1r81-2>li:before{content:"\0025a0  "}.lst-kix_m4i1hzmi1r81-0>li:before{content:"\0025cf  "}.lst-kix_m4i1hzmi1r81-4>li:before{content:"\0025cb  "}.lst-kix_m4i1hzmi1r81-3>li:before{content:"\0025cf  "}.lst-kix_m4i1hzmi1r81-1>li:before{content:"\0025cb  "}ol{margin:0;padding:0}table td,table th{padding:0}.c6{margin-left:72pt;padding-top:0pt;padding-left:0pt;padding-bottom:0pt;line-height:1.15;orphans:2;widows:2;text-align:left}.c1{margin-left:36pt;padding-top:0pt;padding-left:0pt;padding-bottom:0pt;line-height:1.15;orphans:2;widows:2;text-align:left}.c8{color:#434343;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:14pt;font-family:"Arial";font-style:normal}.c2{color:#000000;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:11pt;font-family:"Arial";font-style:normal}.c5{color:#000000;font-weight:400;text-decoration:none;vertical-align:baseline;font-size:16pt;font-family:"Arial";font-style:normal}.c4{padding-top:18pt;padding-bottom:6pt;line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}.c3{padding-top:16pt;padding-bottom:4pt;line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}.c9{padding-top:0pt;padding-bottom:0pt;line-height:1.15;orphans:2;widows:2;text-align:left}.c12{text-decoration-skip-ink:none;-webkit-text-decoration-skip:none;color:#1155cc;text-decoration:underline}.c7{background-color:#ffffff;max-width:468pt;padding:72pt 72pt 72pt 72pt}.c0{padding:0;margin:0}.c11{color:inherit;text-decoration:inherit}.c10{height:11pt}.c13{margin-left:36pt}.title{padding-top:0pt;color:#000000;font-size:26pt;padding-bottom:3pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}.subtitle{padding-top:0pt;color:#666666;font-size:15pt;padding-bottom:16pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}li{color:#000000;font-size:11pt;font-family:"Arial"}p{margin:0;color:#000000;font-size:11pt;font-family:"Arial"}h1{padding-top:20pt;color:#000000;font-size:20pt;padding-bottom:6pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h2{padding-top:18pt;color:#000000;font-size:16pt;padding-bottom:6pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h3{padding-top:16pt;color:#434343;font-size:14pt;padding-bottom:4pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h4{padding-top:14pt;color:#666666;font-size:12pt;padding-bottom:4pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h5{padding-top:12pt;color:#666666;font-size:11pt;padding-bottom:4pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;orphans:2;widows:2;text-align:left}h6{padding-top:12pt;color:#666666;font-size:11pt;padding-bottom:4pt;font-family:"Arial";line-height:1.15;page-break-after:avoid;font-style:italic;orphans:2;widows:2;text-align:left}</style><div class="c7"><h2 class="c4" id="h.cllcskf74s2t"><span class="c5">Participants</span></h2><p class="c9"><span class="c2">Yoav Weiss, Nic Jansma, Alex Christensen, Andrew Galloni, Andy Davies, Behdad Bakhshinategh, Benjamin De Kosnik, Cliff Crocker, Corentin Pescheloche, Giacomo Zecchini, Michal Mocny, Michelle Vu, Noah Lemen, Sean Feng, Andrew Comminos, Lan Wei, Annie Sullivan, Carine, Steven Bougon, Patrick Menan, Jansen Tolle, CP Clermont</span></p><p class="c9 c10"><span class="c2"></span></p><h2 class="c4" id="h.x7c79v44ay7a"><span class="c5">Next Meeting</span></h2><p class="c9"><span class="c2">September 30, 2021 @ normal time</span></p><h2 class="c4" id="h.netc40hcyr3u"><span class="c5">Topics</span></h2><h3 class="c3" id="h.xkfq8ckax3kk"><span class="c12"><a class="c11" href="https://www.google.com/url?q=https://docs.google.com/presentation/d/1yO5JrRxKJXBLC-pZtzLdTAhG3y1nSuL27xONFeQfIKE/edit?usp%3Dsharing&amp;sa=D&amp;source=editors&amp;ust=1631878193929000&amp;usg=AOvVaw3-obuBDZ1L6hR9dLypDNIU">Diagnostics for Animation Smoothness</a></span><span class="c8">&nbsp;- Michal Mocny</span></h3><ul class="c0 lst-kix_m4i1hzmi1r81-0 start"><li class="c1 li-bullet-0"><span class="c2"><b>Michal</b>: Discuss efforts on diagnosing animation smoothness</span></li><li class="c1 li-bullet-0"><span class="c2">... Link to previous presentation on motivation and examples</span></li><li class="c1 li-bullet-0"><span class="c2">... Explain how it works in Chromium</span></li><li class="c1 li-bullet-0"><span class="c2">... Animation smoothness goal is visually complete animation frames, during animations, in a timely manner</span></li><li class="c1 li-bullet-0"><span class="c2">... "No jank"</span></li><li class="c1 li-bullet-0"><span class="c2">... We measure "missed opportunities" to show expected animation updates</span></li><li class="c1 li-bullet-0"><span class="c2">... Very common feedback from developers:</span></li></ul><ul class="c0 lst-kix_m4i1hzmi1r81-1 start"><li class="c6 li-bullet-0"><span style="overflow: hidden;<b> display</b>: inline-block;<b> margin</b>: 0.00px 0.00px;<b> border</b>: 0.00px solid #000000;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);<b> width</b>: 624.00px;<b> height</b>: 282.67px;"><img alt="" src="./WebPerfWG call - September 16th 2021_files/pasted image 0.png" style="width: 624.00px;<b> height</b>: 282.67px; margin-left: 0.00px; margin-top: 0.00px;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></li></ul><ul class="c0 lst-kix_m4i1hzmi1r81-0"><li class="c1 li-bullet-0"><span class="c2">... Most of these questions are not possible to answer with web platform APIs today</span></li><li class="c1 li-bullet-0"><span class="c2">... And can be difficult to diagnose even with local tools</span></li><li class="c1 li-bullet-0"><span class="c2">... [links to where to get more details in deck]</span></li><li class="c1 li-bullet-0"><span class="c2">... View a single frame takes:</span></li></ul><ul class="c0 lst-kix_m4i1hzmi1r81-1 start"><li class="c6 li-bullet-0"><span style="overflow: hidden;<b> display</b>: inline-block;<b> margin</b>: 0.00px 0.00px;<b> border</b>: 0.00px solid #000000;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);<b> width</b>: 624.00px;<b> height</b>: 405.33px;"><img alt="" src="./WebPerfWG call - September 16th 2021_files/pasted image 0(1).png" style="width: 624.00px;<b> height</b>: 405.33px; margin-left: 0.00px; margin-top: 0.00px;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></li></ul><ul class="c0 lst-kix_m4i1hzmi1r81-0"><li class="c1 li-bullet-0"><span class="c2">... GPU process get signal and decides whether it's worth attempting. &nbsp;We request renderer to begin frame</span></li><li class="c1 li-bullet-0"><span class="c2">... Compositor gets signal and updates data structures. &nbsp;Compositor could decide to not start main thread</span></li><li class="c1 li-bullet-0"><span class="c2">... In parallel Compositor and MainThread starting to update a frame</span></li><li class="c1 li-bullet-0"><span class="c2">... Lot of work goes into painting, skipping a lot of details here</span></li><li class="c1 li-bullet-0"><span class="c2">... Eventually renderer gets signal Main Thread is ready to commit</span></li><li class="c1 li-bullet-0"><span class="c2">... We raster a bunch of pixels that's pushed to GPU</span></li><li class="c1 li-bullet-0"><span class="c2">... Swapt to GPU</span></li><li class="c1 li-bullet-0"><span class="c2">... If we get everything before Vsync timeline, that's when a frame is presented</span></li><li class="c1 li-bullet-0"><span class="c2">... Lots of reasons we may not get a frame out in time. &nbsp;One example is main thread updates takes too long</span></li></ul><ul class="c0 lst-kix_m4i1hzmi1r81-1 start"><li class="c6 li-bullet-0"><span style="overflow: hidden;<b> display</b>: inline-block;<b> margin</b>: 0.00px 0.00px;<b> border</b>: 0.00px solid #000000;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);<b> width</b>: 624.00px;<b> height</b>: 357.33px;"><img alt="" src="./WebPerfWG call - September 16th 2021_files/pasted image 0(2).png" style="width: 624.00px;<b> height</b>: 357.33px; margin-left: 0.00px; margin-top: 0.00px;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></li></ul><ul class="c0 lst-kix_m4i1hzmi1r81-0"><li class="c1 li-bullet-0"><span class="c2">... Still produce a new frame update but it may not have all render changes</span></li><li class="c1 li-bullet-0"><span class="c2">... Eventually that frame will complete, and whatever Compositor is available we'll pick it up</span></li><li class="c1 li-bullet-0"><span class="c2">... Often there's a steady stream but it's just not complete</span></li><li class="c1 li-bullet-0"><span class="c2">... What if Main doesn't have any visual updates</span></li><li class="c1 li-bullet-0"><span class="c2">... All past, partial frames are complete (in hindsight)</span></li><li class="c1 li-bullet-0"><span class="c2">... What if we get a new, but slightly delayed frame update, but for every frame?</span></li><li class="c1 li-bullet-0"><span class="c2">... What does that update look like to the user. &nbsp;If it's driven by user input, it may feel sticky (e.g. scroll not smooth). &nbsp;But for animation it may look buttery smooth.</span></li><li class="c1 li-bullet-0"><span class="c2">... Tools</span></li></ul><ul class="c0 lst-kix_m4i1hzmi1r81-1 start"><li class="c6 li-bullet-0"><span style="overflow: hidden;<b> display</b>: inline-block;<b> margin</b>: 0.00px 0.00px;<b> border</b>: 0.00px solid #000000;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);<b> width</b>: 624.00px;<b> height</b>: 346.67px;"><img alt="" src="./WebPerfWG call - September 16th 2021_files/pasted image 0(3).png" style="width: 624.00px;<b> height</b>: 346.67px; margin-left: 0.00px; margin-top: 0.00px;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></li></ul><ul class="c0 lst-kix_m4i1hzmi1r81-0"><li class="c1 li-bullet-0"><span class="c2">... Sample rendering trace</span></li></ul><ul class="c0 lst-kix_m4i1hzmi1r81-1 start"><li class="c6 li-bullet-0"><span style="overflow: hidden;<b> display</b>: inline-block;<b> margin</b>: 0.00px 0.00px;<b> border</b>: 0.00px solid #000000;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);<b> width</b>: 624.00px;<b> height</b>: 352.00px;"><img alt="" src="./WebPerfWG call - September 16th 2021_files/pasted image 0(4).png" style="width: 624.00px;<b> height</b>: 352.00px; margin-left: 0.00px; margin-top: 0.00px;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></li></ul><ul class="c0 lst-kix_m4i1hzmi1r81-0"><li class="c1 li-bullet-0"><span class="c2">... Pipeline here with messages across boundaries, can be daunting to follow</span></li><li class="c1 li-bullet-0"><span class="c2">... Effort to simplify diagnostics in Chromium, "squashing the layers"</span></li></ul><ul class="c0 lst-kix_m4i1hzmi1r81-1 start"><li class="c6 li-bullet-0"><span style="overflow: hidden;<b> display</b>: inline-block;<b> margin</b>: 0.00px 0.00px;<b> border</b>: 0.00px solid #000000;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);<b> width</b>: 624.00px;<b> height</b>: 340.00px;"><img alt="" src="./WebPerfWG call - September 16th 2021_files/pasted image 0(5).png" style="width: 624.00px;<b> height</b>: 340.00px; margin-left: 0.00px; margin-top: 0.00px;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></li></ul><ul class="c0 lst-kix_m4i1hzmi1r81-0"><li class="c1 li-bullet-0"><span class="c2">... PipelineReporter events describe the path of a single frame end to end</span></li><li class="c1 li-bullet-0"><span class="c2">... Duration for an stage within that pipeline, so you can draw conclusions where frames end up on vsync boundaries</span></li><li class="c1 li-bullet-0"><span class="c2">... We have to wait for the future to report about the past. &nbsp;Easier to look at traces recorded to make it understandable, but at the time they're recorded you can't know in real-time</span></li><li class="c1 li-bullet-0"><span class="c2">... Defining animations:</span></li></ul><ul class="c0 lst-kix_m4i1hzmi1r81-1 start"><li class="c6 li-bullet-0"><span style="overflow: hidden;<b> display</b>: inline-block;<b> margin</b>: 0.00px 0.00px;<b> border</b>: 0.00px solid #000000;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);<b> width</b>: 624.00px;<b> height</b>: 353.33px;"><img alt="" src="./WebPerfWG call - September 16th 2021_files/pasted image 0(6).png" style="width: 624.00px;<b> height</b>: 353.33px; margin-left: 0.00px; margin-top: 0.00px;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></li></ul><ul class="c0 lst-kix_m4i1hzmi1r81-0"><li class="c1 li-bullet-0"><span class="c2">... Lot of data for each frame:</span></li></ul><ul class="c0 lst-kix_m4i1hzmi1r81-1 start"><li class="c6 li-bullet-0"><span style="overflow: hidden;<b> display</b>: inline-block;<b> margin</b>: 0.00px 0.00px;<b> border</b>: 0.00px solid #000000;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);<b> width</b>: 624.00px;<b> height</b>: 349.33px;"><img alt="" src="./WebPerfWG call - September 16th 2021_files/pasted image 0(7).png" style="width: 624.00px;<b> height</b>: 349.33px; margin-left: 0.00px; margin-top: 0.00px;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></li></ul><ul class="c0 lst-kix_m4i1hzmi1r81-0"><li class="c1 li-bullet-0"><span class="c2">... We can look at animations and the frames they produce</span></li></ul><ul class="c0 lst-kix_m4i1hzmi1r81-1 start"><li class="c6 li-bullet-0"><span style="overflow: hidden;<b> display</b>: inline-block;<b> margin</b>: 0.00px 0.00px;<b> border</b>: 0.00px solid #000000;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);<b> width</b>: 624.00px;<b> height</b>: 353.33px;"><img alt="" src="./WebPerfWG call - September 16th 2021_files/pasted image 0(8).png" style="width: 624.00px;<b> height</b>: 353.33px; margin-left: 0.00px; margin-top: 0.00px;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></li></ul><ul class="c0 lst-kix_m4i1hzmi1r81-0"><li class="c1 li-bullet-0"><span class="c2">... TouchScroll animation and how many frames were expected vs. produced</span></li><li class="c1 li-bullet-0"><span class="c2">... Took 4,097ms but at 60FPS you'd expect ~ 240 frames</span></li><li class="c1 li-bullet-0"><span class="c2">... For this scroll, might not be producing a steady state of movement the entire time</span></li><li class="c1 li-bullet-0"><span class="c2">... Dropped frames</span></li></ul><ul class="c0 lst-kix_m4i1hzmi1r81-1 start"><li class="c6 li-bullet-0"><span style="overflow: hidden;<b> display</b>: inline-block;<b> margin</b>: 0.00px 0.00px;<b> border</b>: 0.00px solid #000000;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);<b> width</b>: 624.00px;<b> height</b>: 346.67px;"><img alt="" src="./WebPerfWG call - September 16th 2021_files/pasted image 0(9).png" style="width: 624.00px;<b> height</b>: 346.67px; margin-left: 0.00px; margin-top: 0.00px;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></li></ul><ul class="c0 lst-kix_m4i1hzmi1r81-0"><li class="c1 li-bullet-0"><span class="c2">... an imperfect frame, when it mattered to the user</span></li><li class="c1 li-bullet-0"><span class="c2">... Lots of nuances</span></li><li class="c1 li-bullet-0"><span class="c2">... Type of interaction, idle periods</span></li><li class="c1 li-bullet-0"><span class="c2">... Could have perfect animation but poor quality (e.g. video poor network quality)</span></li><li class="c1 li-bullet-0"><span class="c2">... Another example at Edge, attempt to make scrolling buttery smooth, it wouldn't be as sticky. &nbsp;There's a tradeoff.</span></li><li class="c1 li-bullet-0"><span class="c2">... Some icons are barely important icons size-wise</span></li><li class="c1 li-bullet-0"><span class="c2">... It's hard to know which animations are important to the user</span></li><li class="c1 li-bullet-0"><span class="c2">... From these, dropped frames isn't a boolean value -- it's fractional, or a probability that it mattered to the user</span></li><li class="c1 li-bullet-0"><span class="c2">... We know there were missed updates, but what is the likelihood there was noticeable jank to the user</span></li><li class="c1 li-bullet-0"><span class="c2">... I doubt there's a single correct answer. &nbsp;If goal is pixel perfection, you want to know every detail on dropped frames. &nbsp;If your goal is to identify user pain from real-user data, that's different data to gather</span></li><li class="c1 li-bullet-0"><span class="c2">... Quick recap:</span></li></ul><ul class="c0 lst-kix_m4i1hzmi1r81-1 start"><li class="c6 li-bullet-0"><span style="overflow: hidden;<b> display</b>: inline-block;<b> margin</b>: 0.00px 0.00px;<b> border</b>: 0.00px solid #000000;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);<b> width</b>: 624.00px;<b> height</b>: 253.33px;"><img alt="" src="./WebPerfWG call - September 16th 2021_files/pasted image 0(10).png" style="width: 624.00px;<b> height</b>: 253.33px; margin-left: 0.00px; margin-top: 0.00px;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></li></ul><ul class="c0 lst-kix_m4i1hzmi1r81-0"><li class="c1 li-bullet-0"><span class="c2">... Why FrameTiming v1 doesn't cut it</span></li></ul><ul class="c0 lst-kix_m4i1hzmi1r81-1 start"><li class="c6 li-bullet-0"><span style="overflow: hidden;<b> display</b>: inline-block;<b> margin</b>: 0.00px 0.00px;<b> border</b>: 0.00px solid #000000;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);<b> width</b>: 624.00px;<b> height</b>: 245.33px;"><img alt="" src="./WebPerfWG call - September 16th 2021_files/pasted image 0(11).png" style="width: 624.00px;<b> height</b>: 245.33px; margin-left: 0.00px; margin-top: 0.00px;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></li></ul><ul class="c0 lst-kix_m4i1hzmi1r81-0"><li class="c1 li-bullet-0"><span class="c2">... No coverage for compositor updates</span></li><li class="c1 li-bullet-0"><span class="c2">... No notion of active animations at all</span></li><li class="c1 li-bullet-0"><span class="c2">... Seeking an alternative to Frame Timing v1</span></li><li class="c1 li-bullet-0"><span class="c2">... Screenshot of how this looks on real-life sites</span></li></ul><ul class="c0 lst-kix_m4i1hzmi1r81-1 start"><li class="c6 li-bullet-0"><span style="overflow: hidden;<b> display</b>: inline-block;<b> margin</b>: 0.00px 0.00px;<b> border</b>: 0.00px solid #000000;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);<b> width</b>: 624.00px;<b> height</b>: 352.00px;"><img alt="" src="./WebPerfWG call - September 16th 2021_files/pasted image 0(12).png" style="width: 624.00px;<b> height</b>: 352.00px; margin-left: 0.00px; margin-top: 0.00px;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></li></ul><ul class="c0 lst-kix_m4i1hzmi1r81-0"><li class="c1 li-bullet-0"><span class="c2">... always frames in flight</span></li><li class="c1 li-bullet-0"><span class="c2">... PipelineReported to simplify these things but it's still very complicated</span></li><li class="c1 li-bullet-0"><span style="overflow: hidden;<b> display</b>: inline-block;<b> margin</b>: 0.00px 0.00px;<b> border</b>: 0.00px solid #000000;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);<b> width</b>: 624.00px;<b> height</b>: 206.67px;"><img alt="" src="./WebPerfWG call - September 16th 2021_files/pasted image 0(13).png" style="width: 624.00px;<b> height</b>: 206.67px; margin-left: 0.00px; margin-top: 0.00px;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></li><li class="c1 li-bullet-0"><span class="c2">Some of the post-processing I've worked on</span></li></ul><ul class="c0 lst-kix_m4i1hzmi1r81-1 start"><li class="c6 li-bullet-0"><span style="overflow: hidden;<b> display</b>: inline-block;<b> margin</b>: 0.00px 0.00px;<b> border</b>: 0.00px solid #000000;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);<b> width</b>: 624.00px;<b> height</b>: 244.00px;"><img alt="" src="./WebPerfWG call - September 16th 2021_files/pasted image 0(14).png" style="width: 624.00px;<b> height</b>: 244.00px; margin-left: 0.00px; margin-top: 0.00px;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></li></ul><ul class="c0 lst-kix_m4i1hzmi1r81-0"><li class="c1 li-bullet-0"><span class="c2">... Large red area is missing updates from main thread animations</span></li><li class="c1 li-bullet-0"><span class="c2">... Yellow is similar but it ignores ???</span></li><li class="c1 li-bullet-0"><span class="c2">... Blue is when no animations</span></li><li class="c1 li-bullet-0"><span class="c2">... Green is checkerboarding</span></li><li class="c1 li-bullet-0"><span class="c2">... Later on, scrolling is smooth and that's what the user is doing</span></li><li class="c1 li-bullet-0"><span class="c2">... Plenty of imperfection, but the page experience felt pretty good to users</span></li><li class="c1 li-bullet-0"><span class="c2">... On the other hand, there's a lot of issues that felt worse to users:</span></li></ul><ul class="c0 lst-kix_m4i1hzmi1r81-1 start"><li class="c6 li-bullet-0"><span style="overflow: hidden;<b> display</b>: inline-block;<b> margin</b>: 0.00px 0.00px;<b> border</b>: 0.00px solid #000000;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);<b> width</b>: 624.00px;<b> height</b>: 252.00px;"><img alt="" src="./WebPerfWG call - September 16th 2021_files/pasted image 0(15).png" style="width: 624.00px;<b> height</b>: 252.00px; margin-left: 0.00px; margin-top: 0.00px;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></li></ul><ul class="c0 lst-kix_m4i1hzmi1r81-0"><li class="c1 li-bullet-0"><span class="c2">... Big spike at end is Android notification tray being swiped down, user wasn't paying attention to screen update</span></li><li class="c1 li-bullet-0"><span class="c2">... We try to combine these signals with different weights and area. &nbsp;Merged timeline. Has to be opinionated.</span></li><li class="c1 li-bullet-0"><span class="c2">... We can try to convert that timeline into a single score, has to be a bit opinionated, trying a couple thing</span></li><li class="c1 li-bullet-0"><span class="c2">... In Chrome Canary you can see a Performance HUD</span></li></ul><ul class="c0 lst-kix_m4i1hzmi1r81-1 start"><li class="c6 li-bullet-0"><span style="overflow: hidden;<b> display</b>: inline-block;<b> margin</b>: 0.00px 0.00px;<b> border</b>: 0.00px solid #000000;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);<b> width</b>: 624.00px;<b> height</b>: 352.00px;"><img alt="" src="./WebPerfWG call - September 16th 2021_files/pasted image 0(16).png" style="width: 624.00px;<b> height</b>: 352.00px; margin-left: 0.00px; margin-top: 0.00px;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></li></ul><ul class="c0 lst-kix_m4i1hzmi1r81-0"><li class="c1 li-bullet-0"><span class="c2">... CWV scores plus information about dropped frames</span></li><li class="c1 li-bullet-0"><span class="c2">... All of this continues to evolve. &nbsp;You can play with early revisions to see how experience matches to expectations</span></li><li class="c1 li-bullet-0"><span class="c2">... Early entries into Chrome UKM field data</span></li></ul><ul class="c0 lst-kix_m4i1hzmi1r81-1 start"><li class="c6 li-bullet-0"><span style="overflow: hidden;<b> display</b>: inline-block;<b> margin</b>: 0.00px 0.00px;<b> border</b>: 0.00px solid #000000;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);<b> width</b>: 624.00px;<b> height</b>: 274.67px;"><img alt="" src="./WebPerfWG call - September 16th 2021_files/pasted image 0(17).png" style="width: 624.00px;<b> height</b>: 274.67px; margin-left: 0.00px; margin-top: 0.00px;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></li></ul><ul class="c0 lst-kix_m4i1hzmi1r81-0"><li class="c1 li-bullet-0"><span class="c2">Some details into Dev Tools now</span></li></ul><ul class="c0 lst-kix_m4i1hzmi1r81-1 start"><li class="c6 c10 li-bullet-0"><span class="c2"></span></li><li class="c6 li-bullet-0"><span style="overflow: hidden;<b> display</b>: inline-block;<b> margin</b>: 0.00px 0.00px;<b> border</b>: 0.00px solid #000000;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);<b> width</b>: 624.00px;<b> height</b>: 452.00px;"><img alt="" src="./WebPerfWG call - September 16th 2021_files/pasted image 0(18).png" style="width: 624.00px;<b> height</b>: 452.00px; margin-left: 0.00px; margin-top: 0.00px;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></li></ul><ul class="c0 lst-kix_m4i1hzmi1r81-0"><li class="c1 li-bullet-0"><span class="c2">... Interpretation of these depends on your goals:</span></li></ul><ul class="c0 lst-kix_m4i1hzmi1r81-1 start"><li class="c6 li-bullet-0"><span style="overflow: hidden;<b> display</b>: inline-block;<b> margin</b>: 0.00px 0.00px;<b> border</b>: 0.00px solid #000000;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);<b> width</b>: 624.00px;<b> height</b>: 266.67px;"><img alt="" src="./WebPerfWG call - September 16th 2021_files/pasted image 0(19).png" style="width: 624.00px;<b> height</b>: 266.67px; margin-left: 0.00px; margin-top: 0.00px;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></li></ul><ul class="c0 lst-kix_m4i1hzmi1r81-0"><li class="c1 li-bullet-0"><span class="c2">... If your goal is field data, we have a lot left to learn</span></li><li class="c1 li-bullet-0"><span class="c2">... Last time I presented Ryosuke asked a question of why we're focused on dropped frames, especially in a world of variable refresh rates</span></li><li class="c1 li-bullet-0"><span class="c2">... Very good question and we've been talking about it into a percentage of dropped frames, because idle time we consider good (smooth)</span></li><li class="c1 li-bullet-0"><span class="c2">... Percent dropped is kind of like FPS, but even within games there's a trend towards more accurate measurements. &nbsp;Like frame-to-frame delays</span></li><li class="c1 li-bullet-0"><span class="c2">... If your goal is to require frames take no longer than 10ms, you could take this data and interpret it for your goals</span></li><li class="c1 li-bullet-0"><span class="c2">... Seeking feedback</span></li></ul><ul class="c0 lst-kix_m4i1hzmi1r81-1 start"><li class="c6 li-bullet-0"><span style="overflow: hidden;<b> display</b>: inline-block;<b> margin</b>: 0.00px 0.00px;<b> border</b>: 0.00px solid #000000;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);<b> width</b>: 624.00px;<b> height</b>: 302.67px;"><img alt="" src="./WebPerfWG call - September 16th 2021_files/pasted image 0(20).png" style="width: 624.00px;<b> height</b>: 302.67px; margin-left: 0.00px; margin-top: 0.00px;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></li></ul><ul class="c0 lst-kix_m4i1hzmi1r81-0"><li class="c1 li-bullet-0"><span class="c2"><b>Ben</b>: context on percentile metrics?</span></li></ul><ul class="c0 lst-kix_m4i1hzmi1r81-1 start"><li class="c6 li-bullet-0"><span style="overflow: hidden;<b> display</b>: inline-block;<b> margin</b>: 0.00px 0.00px;<b> border</b>: 0.00px solid #000000;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);<b> width</b>: 624.00px;<b> height</b>: 345.33px;"><img alt="" src="./WebPerfWG call - September 16th 2021_files/pasted image 0(21).png" style="width: 624.00px;<b> height</b>: 345.33px; margin-left: 0.00px; margin-top: 0.00px;<b> transform</b>: rotate(0.00rad) translateZ(0px); -webkit-transform: rotate(0.00rad) translateZ(0px);" title=""></span></li></ul><ul class="c0 lst-kix_m4i1hzmi1r81-0"><li class="c1 li-bullet-0"><span class="c2">...not in chrome, instead uses specific definition of dropped frames evolved from that</span></li><li class="c1 li-bullet-0"><span class="c2">...max dropped frame is “worst window”, 95th percentile avoids extrema</span></li><li class="c1 li-bullet-0"><span class="c2">…similar to CLS (cumulative layout shift)</span></li><li class="c1 li-bullet-0"><span class="c2"><b>Andy Davies</b>: In RUM world, we would want less detail rather than more. &nbsp;Although we'll want to know whether the user was trying to interact with the page at the point</span></li><li class="c1 li-bullet-0"><span class="c2"><b>Michal</b>: We've thought about user-input in two ways, user animations are obvious. &nbsp;Immediately after an interaction the user may be paying attention more. &nbsp;Should we weigh those more heavily?</span></li><li class="c1 li-bullet-0"><span class="c2"><b>Andrew Comminos</b>: We care a lot about direct animations as a result of user interactions. &nbsp;Responsiveness metrics based on Long Tasks, Element Timing. &nbsp;Little insight into Compositor side.</span></li><li class="c1 li-bullet-0"><span class="c2"><b>CP Clermont</b>: Are we going to have a way to figure out what caused or labelling sources of janks. &nbsp;I tracked FPS after clicks, so I could track this click caused this jank. &nbsp;Is there something similar here?</span></li><li class="c1 li-bullet-0"><span class="c2"><b>Michal</b>: Probably too early to know what we could do as far as attribution. &nbsp;I've showcased you can slice on the frame (for what actually showed) but you can also slice on the animation over time. &nbsp;One way to to say "this" animation is particularly janky. &nbsp;So you might know which animation and which times. &nbsp;Options here. &nbsp;In terms of what lead to skipping of frames that's tough.</span></li></ul><h3 class="c3" id="h.qdjfsf4q8bgh"><span class="c8">Priority Hints - Patrick Meenan</span></h3><ul class="c0 lst-kix_cbdukoi9vimv-0 start"><li class="c1 li-bullet-0"><span class="c2"><b>Patrick</b>: Two/three years ago since Priority Hints were active in this group. &nbsp;Looking forward to resurrecting that work and pushing it forwards in standards.</span></li><li class="c1 li-bullet-0"><span class="c2">... Ability to tag elements, resources, link rel=prefetch, images, fetch API with importance high/low/auto.</span></li><li class="c1 li-bullet-0"><span class="c2">... For browser to "maybe" do something specific with that</span></li><li class="c1 li-bullet-0"><span class="c2">... In Chrome 96 we're hoping to bring it back as experiment with Origin Trial</span></li><li class="c1 li-bullet-0"><span class="c2">... In Chrome there are 5 priority levels, images are at the bottom of that scale until they're visible in layout.</span></li><li class="c1 li-bullet-0"><span class="c2">... Ability for you to tag LCP is important to load this one during early phase of page loading</span></li><li class="c1 li-bullet-0"><span class="c2">... Ability for scripts to boost priority</span></li><li class="c1 li-bullet-0"><span class="c2">... Current implementation extends it to virtually all content types and Fetch API</span></li><li class="c1 li-bullet-0"><span class="c2">... Keyboard input, autocomplete can be high priority calls</span></li><li class="c1 li-bullet-0"><span class="c2">... Wanted to see if there were any concerns</span></li><li class="c1 li-bullet-0"><span class="c2">... In Chrome, high/low will end up in same buckets</span></li><li class="c1 li-bullet-0"><span class="c2">... Exception being render-blocking CSS the most you can lower it is one notch</span></li><li class="c1 li-bullet-0"><span class="c2">... Lets you straddle the early vs late part of the waterfall</span></li><li class="c1 li-bullet-0"><span class="c2">... Gives you fine-grained control over order</span></li><li class="c1 li-bullet-0"><span class="c2">... Priorities go out the window over multiple origins</span></li><li class="c1 li-bullet-0"><span class="c2">... Chrome has concurrent request limits (e.g. 10+ low pri) will throttle</span></li><li class="c1 li-bullet-0"><span class="c2">... For the most part prioritization mostly matters same-origin</span></li><li class="c1 li-bullet-0"><span class="c2">... For Origin Trial, tagging LCP images to boost priority and reduce link rel=preload hacks for async scripts</span></li><li class="c1 li-bullet-0"><span class="c2">... Is there interest for developers?</span></li><li class="c1 li-bullet-0"><span class="c2">... Are current priority hints of high/low enough?</span></li><li class="c1 li-bullet-0"><span class="c2">... Will see followups thru spec process to get it standardizes</span></li><li class="c1 li-bullet-0"><span class="c2">... Want to make sure we're going in right direction after pause of work</span></li><li class="c1 li-bullet-0"><span class="c2"><b>Yoav</b>: Interest in feedback from tools folks and RUM providers</span></li><li class="c1 li-bullet-0"><span class="c2">... Would we be able to recommend this to customers and users</span></li><li class="c1 li-bullet-0"><span class="c2">... Or are there missing pieces outside of priority hints that would be helpful</span></li><li class="c1 li-bullet-0"><span class="c2"><b>Cliff Crocker</b>: Interesting for synthetic for advice we can give users about how they can improve. &nbsp;Can be more challenging for RUM maybe. &nbsp;Show up as lighthouse audit for improving LCP. &nbsp;Useful for our customers</span></li><li class="c1 li-bullet-0"><span class="c2"><b>Patrick</b>: In RUM, you should get LCP element information, and RT could let you figure out if it's delayed.</span></li><li class="c1 li-bullet-0"><span class="c2"><b>Cliff</b>: No-brainer for synthetic, more challenging for RUM</span></li><li class="c1 li-bullet-0"><span class="c2"><b>Andy</b>: Giving developers another tool other than preload is the important thing. &nbsp;We all see preload overused. &nbsp;Preload is causing more problems than it's solving.</span></li><li class="c1 li-bullet-0"><span class="c2"><b>Patrick</b>: ???</span></li><li class="c1 li-bullet-0"><span class="c2"><b>Boris</b>: Preload mis-use is causing issues, priority hints mis-use could cause the same</span></li><li class="c1 li-bullet-0"><span class="c2"><b>Patrick</b>: Similar to lazy-load. &nbsp;Hopefully hints in two directions (important or not) can limit amount of damage that can be done. &nbsp;If you flag every image as important, nothing is important. &nbsp;Hopefully we have enough gates around TTI, LCP, FCP that that kind of mistake will get caught very quickly.</span></li><li class="c1 li-bullet-0"><span class="c2">... Does provide a little bit of a footgun</span></li><li class="c1 li-bullet-0"><span class="c2">... Some protections in Chrome at least if you de-prioritize parser-blocker scripts, as soon as it gets blocked, it will increase the priority itself to continue parsing</span></li><li class="c1 li-bullet-0"><span class="c2">... Everyone has broken their prioritization support in H2, so hopefully with H3 that'll be better</span></li><li class="c1 li-bullet-0"><span class="c2"><b>Yoav</b>: In terms of other browser folks, I suspect that Chromium has more client-side knobs to play around with priority than other browsers. &nbsp;But I believe all browsers support on-the-wire priorities?</span></li><li class="c1 li-bullet-0"><span class="c2"><b>Benjamin</b>: I'm a little skeptical this won't be a bigger gun to cause more problems. &nbsp;If we could show this is fixing some of the problems of overuse of preload I'd be more interested. &nbsp;Right now I feel like this is giving 1-5 more ways to create confusion.</span></li><li class="c1 li-bullet-0"><span class="c2">... Anything that's focused on reducing damage would be great</span></li><li class="c1 li-bullet-0"><span class="c2"><b>Patrick</b>: Webkit and Gecko have priority schemes to some extent. &nbsp;Once it gets to the wire on H2/H3, very similar to Chrome. &nbsp;Hopefully useful in Firefox as well.</span></li><li class="c1 li-bullet-0"><span class="c2">... Particularly usefulness in Fetch for use-responsive API calls vs backgrounds activity in JS</span></li><li class="c1 li-bullet-0"><span class="c2"><b>Alex Christensen</b>: &nbsp;I think if we expose only high/low priority, we are quickly going to have people saying they want a medium priority, or a medium-high priority, etc.</span></li><li class="c1 li-bullet-0"><span class="c2">... The biggest issues we've seen with priorities relates to low priority requests not actually being sent</span></li><li class="c1 li-bullet-0"><span class="c2"><b>Patrick</b>: From Chrome's perspective the only reason to have two directions to go in, do you load while in render-blocking mode or not. &nbsp;Otherwise in discovery order. &nbsp;You have some control, or put in markup in order you want things loading. &nbsp;With more layers you add more complexity than you can trust developers to do with.</span></li><li class="c1 li-bullet-0"><span class="c2">... With H3, it has levels and/or exclusive requests. &nbsp;Do we need a mechanism at markup level or can we leave at protocol level to figure out.</span></li><li class="c1 li-bullet-0"><span class="c2"><b>Yoav</b>: For images, for some formats but not others. &nbsp;Progressive you may want one mode, for hero images you want them fully downloaded versus half-downloaded each.</span></li><li class="c1 li-bullet-0"><span class="c2"><b>Patrick</b>: I'm not sure either developers or browsers can make an intelligent decision about that</span></li><li class="c1 li-bullet-0"><span class="c2"><b>Michelle</b>: What was the advantage of using priority high async scripts instead of preloading the scripts again? or is the advantage mostly to encourage developers to distinguish high vs. low priority </span></li><li class="c1 li-bullet-0"><span class="c2"><b>Patrick</b>: I'm hoping the semantics for preload hints is right way to hint priority, and priority would be for things the parser didn't figure out otherwise. &nbsp; Usually scripts get high-priority, unless they're async. &nbsp;Preload as=script implies to Chrome it's a high-priority script. &nbsp;Feels like one of those things that it works, but is Chrome specific and isn't explicitly intentional markup.</span></li></ul><p class="c9 c10 c13"><span class="c2"></span></p></div></div><script type="text/javascript" nonce="">(function(){/*

 Copyright The Closure Library Authors.
 SPDX-License-Identifier: Apache-2.0
*/
var aa="function"==typeof Object.create?Object.create:function(a){function b(){}b.prototype=a;return new b},ba="function"==typeof Object.defineProperties?Object.defineProperty:function(a,b,c){if(a==Array.prototype||a==Object.prototype)return a;a[b]=c.value;return a};
function ca(a){a=["object"==typeof globalThis&&globalThis,a,"object"==typeof window&&window,"object"==typeof self&&self,"object"==typeof global&&global];for(var b=0;b<a.length;++b){var c=a[b];if(c&&c.Math==Math)return c}throw Error("Cannot find global object");}var da=ca(this);function ea(a,b){if(b)a:{var c=da;a=a.split(".");for(var d=0;d<a.length-1;d++){var e=a[d];if(!(e in c))break a;c=c[e]}a=a[a.length-1];d=c[a];b=b(d);b!=d&&null!=b&&ba(c,a,{configurable:!0,writable:!0,value:b})}}var k;
if("function"==typeof Object.setPrototypeOf)k=Object.setPrototypeOf;else{var l;a:{var fa={a:!0},ha={};try{ha.__proto__=fa;l=ha.a;break a}catch(a){}l=!1}k=l?function(a,b){a.__proto__=b;if(a.__proto__!==b)throw new TypeError(a+" is not extensible");return a}:null}var ia=k;
function m(a,b){a.prototype=aa(b.prototype);a.prototype.constructor=a;if(ia)ia(a,b);else for(var c in b)if("prototype"!=c)if(Object.defineProperties){var d=Object.getOwnPropertyDescriptor(b,c);d&&Object.defineProperty(a,c,d)}else a[c]=b[c];a.m=b.prototype}ea("Object.is",function(a){return a?a:function(b,c){return b===c?0!==b||1/b===1/c:b!==b&&c!==c}});var n=this||self;function p(){}function q(a){var b=typeof a;return"object"==b&&null!=a||"function"==b}
function ja(a,b){var c=Array.prototype.slice.call(arguments,1);return function(){var d=c.slice();d.push.apply(d,arguments);return a.apply(this,d)}}function ka(a,b){function c(){}c.prototype=b.prototype;a.m=b.prototype;a.prototype=new c;a.prototype.constructor=a;a.C=function(d,e,f){for(var g=Array(arguments.length-2),h=2;h<arguments.length;h++)g[h-2]=arguments[h];return b.prototype[e].apply(d,g)}}function r(a){return a};function t(a){t[" "](a);return a}t[" "]=p;function la(a,b,c){return Object.prototype.hasOwnProperty.call(a,b)?a[b]:a[b]=c(b)};function ma(a){return la(a.prototype,"$$generatedClassName",function(){return"Class$obf_"+{valueOf:function(){return++na}}})}var na=1E3;function u(){}u.prototype.s=function(){return this.j||(Object.defineProperties(this,{j:{value:oa=oa+1|0,enumerable:!1}}),this.j)};u.prototype.toString=function(){var a=v(w(pa(this.constructor)))+"@";var b=(this.s()>>>0).toString(16);return a+v(b)};function x(){}m(x,u);x.prototype.h=function(a){this.g=a;if(a instanceof Object)try{a.v=this}catch(b){}};function qa(a){a.g instanceof Error&&(Error.captureStackTrace?Error.captureStackTrace(a.g):a.g.stack=Error().stack)}x.prototype.toString=function(){var a=w(pa(this.constructor)),b=this.l;return null==b?a:v(a)+": "+v(b)};
function ra(a){if(null!=a){var b=a.v;if(null!=b)return b}a instanceof TypeError?(b=new sa,b.l=v(a),qa(b),b.i=a,b.h(new TypeError(b)),a=b):(b=new y,b.l=v(a),qa(b),b.i=a,b.h(Error(b)),a=b);return a};function z(){}m(z,x);function A(){}m(A,z);function y(){}m(y,A);y.prototype.h=function(a){A.prototype.h.call(this,"__noinit__"===this.i?a:this.i)};function sa(){}m(sa,y);var oa=0;function ta(a,b){return"string"==typeof a?a.charCodeAt(b):a.g(b)};function B(){}var ua,va;m(B,u);function wa(){wa=function(){};va=new C;ua=new D};function C(){}m(C,B);C.prototype.toString=function(){return""};function D(){}m(D,B);D.prototype.toString=function(){return"unknown"};function v(a){return null==a?"null":a.toString()}function xa(a){return 65536<=a?v(String.fromCharCode((55296+((a-65536|0)>>10&1023)|0)&65535))+v(String.fromCharCode((56320+((a-65536|0)&1023)|0)&65535)):String.fromCharCode(a&65535)}function ya(a,b){var c=b,d=a.length,e;b=ta(a,(e=c,c=c+1|0,e));var f;if(e=55296<=b&&56319>=b&&c<d)a=f=ta(a,c),e=56320<=a&&57343>=a;var g;e?g=65536+((b&1023)<<10)+(f&1023)|0:g=b;return g};function E(a,b){this.g=a;this.h=b}m(E,u);function w(a){if(0!=a.h){var b="L"+v(ma(a.g))+";";a=a.h;for(var c="",d=0;d<a;d=d+1|0)c=v(c)+"[";return v(c)+v(b)}return ma(a.g)}E.prototype.toString=function(){return"class "+v(w(this))};function pa(a){return la(a.prototype,"$$class/0",function(){return new E(a,0)})};function za(a){var b=a;try{var c;if(c="www.google.com"===Aa(a)){var d=Ba(a)[5];c="/url"===F(d,!0)}if(c){var e=Ca(a,"q");b=e?e:Ca(a,"url")}}catch(f){if(f=ra(f),!(f instanceof z))throw f.g;}return null!=b?b:""};function F(a,b){return null==a?a:b?decodeURI(a):decodeURIComponent(a)};var Da;function Ba(a){G();a=Da.exec(a);for(var b=[],c=0;7>=c;c=c+1|0)a.length<=c||null==a[c]?b.push(null):b.push(a[c]);return b}function Aa(a){a=Ba(a);return F(a[3],!0)}
function Ca(a,b){G();var c=a.indexOf(xa(35));c=0>c?a.length:c;a:{var d=0;for(var e=b.length;0<(d=a.indexOf(b,d))&&d<c;){var f=ya(a,d-1|0);if(38==f||63==f){if((d+e|0)>=a.length)break a;f=ya(a,d+e|0);if(61==f||38==f||35==f)break a}d=d+(e+1)|0}d=-1}if(0>d)return null;e=a.indexOf(xa(38),d);if(0>e||e>c)e=c;d=d+(b.length+1)|0;b=Math.min(a.length,d);a=a.substr(b,Math.min(a.length,Math.max(d,e))-b|0);c=" ";for(b=0;0<=(b=c.indexOf("\\",b));)36==c.charCodeAt(b+1|0)?(d=v(c.substr(0,b|0))+"$",e=b=b+1|0,c=d+v(c.substr(e))):
(d=v(c.substr(0,b|0)),e=b=b+1|0,c=d+v(c.substr(e)));a=a.replace(RegExp("\\+","g"),c);return F(a,!1)}function G(){G=function(){};Da=RegExp("^(?:([^:/?#.]+):)?(?://(?:([^/?#]*)@)?([^/#?]*?)(?::([0-9]+))?(?=[/#?]|$))?([^?#]+)?(?:\\?([^#]*))?(?:#([\\S\\s]*))?$")};var Ea=Array.prototype.indexOf?function(a,b){return Array.prototype.indexOf.call(a,b,void 0)}:function(a,b){if("string"===typeof a)return"string"!==typeof b||1!=b.length?-1:a.indexOf(b,0);for(var c=0;c<a.length;c++)if(c in a&&a[c]===b)return c;return-1};var Fa=/&/g,Ga=/</g,Ha=/>/g,Ia=/"/g,Ja=/'/g,Ka=/\x00/g,La=/[\x00&<>"']/;var H;a:{var Ma=n.navigator;if(Ma){var Na=Ma.userAgent;if(Na){H=Na;break a}}H=""}function I(a){return-1!=H.indexOf(a)};function Oa(a,b,c){for(var d in a)b.call(c,a[d],d,a)};var J;function K(a,b){this.i=a===Pa&&b||"";this.j=Qa}K.prototype.h=!0;K.prototype.g=function(){return this.i};var Qa={},Pa={};function L(a,b){this.i=b===M?a:""}L.prototype.h=!0;L.prototype.g=function(){return this.i.toString()};L.prototype.toString=function(){return this.i.toString()};function N(a){return a instanceof L&&a.constructor===L?a.i:"type_error:SafeUrl"}
var Ra=RegExp('^(?:audio/(?:3gpp2|3gpp|aac|L16|midi|mp3|mp4|mpeg|oga|ogg|opus|x-m4a|x-matroska|x-wav|wav|webm)|font/\\w+|image/(?:bmp|gif|jpeg|jpg|png|tiff|webp|x-icon)|video/(?:mpeg|mp4|ogg|webm|quicktime|x-matroska))(?:;\\w+=(?:\\w+|"[\\w;,= ]+"))*$',"i"),Sa=/^data:(.*);base64,[a-z0-9+\/]+=*$/i,Ta=/^(?:(?:https?|mailto|ftp):|[^:/?#]*(?:[/?#]|$))/i;function Ua(a){if(a instanceof L)return a;a="object"==typeof a&&a.h?a.g():String(a);Ta.test(a)||(a="about:invalid#zClosurez");return new L(a,M)}
var M={},Va=new L("about:invalid#zClosurez",M);var Wa={};function O(a,b,c){this.i=c===Wa?a:"";this.h=!0}O.prototype.g=function(){return this.i.toString()};O.prototype.toString=function(){return this.i.toString()};function Xa(a,b,c,d){a=a instanceof L?a:Ua(a);b=b||n;c=c instanceof K?c instanceof K&&c.constructor===K&&c.j===Qa?c.i:"type_error:Const":c||"";return void 0!==d?b.open(N(a),c,d):b.open(N(a),c)};var Ya=I("Trident")||I("MSIE"),Za=I("Edge")||Ya,$a=I("Gecko")&&!(-1!=H.toLowerCase().indexOf("webkit")&&!I("Edge"))&&!(I("Trident")||I("MSIE"))&&!I("Edge"),ab=I("Macintosh");function bb(a){a&&"function"==typeof a.u&&a.u()};function P(){this.h=this.h;this.g=this.g}P.prototype.h=!1;P.prototype.u=function(){this.h||(this.h=!0,this.j())};P.prototype.j=function(){if(this.g)for(;this.g.length;)this.g.shift()()};function Q(a,b){this.type=a;this.target=b;this.i=!1}Q.prototype.g=function(){this.i=!0};var cb=function(){if(!n.addEventListener||!Object.defineProperty)return!1;var a=!1,b=Object.defineProperty({},"passive",{get:function(){a=!0}});try{n.addEventListener("test",p,b),n.removeEventListener("test",p,b)}catch(c){}return a}();function R(a){Q.call(this,a?a.type:"");this.relatedTarget=this.target=null;this.button=this.screenY=this.screenX=this.clientY=this.clientX=0;this.key="";this.metaKey=this.shiftKey=this.altKey=this.ctrlKey=!1;this.state=null;this.pointerId=0;this.pointerType="";this.h=null;if(a){var b=this.type=a.type,c=a.changedTouches&&a.changedTouches.length?a.changedTouches[0]:null;this.target=a.target||a.srcElement;var d=a.relatedTarget;if(d){if($a){a:{try{t(d.nodeName);var e=!0;break a}catch(f){}e=!1}e||(d=null)}}else"mouseover"==
b?d=a.fromElement:"mouseout"==b&&(d=a.toElement);this.relatedTarget=d;c?(this.clientX=void 0!==c.clientX?c.clientX:c.pageX,this.clientY=void 0!==c.clientY?c.clientY:c.pageY,this.screenX=c.screenX||0,this.screenY=c.screenY||0):(this.clientX=void 0!==a.clientX?a.clientX:a.pageX,this.clientY=void 0!==a.clientY?a.clientY:a.pageY,this.screenX=a.screenX||0,this.screenY=a.screenY||0);this.button=a.button;this.key=a.key||"";this.ctrlKey=a.ctrlKey;this.altKey=a.altKey;this.shiftKey=a.shiftKey;this.metaKey=
a.metaKey;this.pointerId=a.pointerId||0;this.pointerType="string"===typeof a.pointerType?a.pointerType:db[a.pointerType]||"";this.state=a.state;this.h=a;a.defaultPrevented&&R.m.g.call(this)}}ka(R,Q);var db={2:"touch",3:"pen",4:"mouse"};R.prototype.g=function(){R.m.g.call(this);var a=this.h;a.preventDefault?a.preventDefault():a.returnValue=!1};var S="closure_listenable_"+(1E6*Math.random()|0);var eb=0;function fb(a,b,c,d,e){this.listener=a;this.g=null;this.src=b;this.type=c;this.capture=!!d;this.i=e;this.key=++eb;this.h=this.o=!1}function gb(a){a.h=!0;a.listener=null;a.g=null;a.src=null;a.i=null};function T(a){this.src=a;this.g={};this.h=0}T.prototype.add=function(a,b,c,d,e){var f=a.toString();a=this.g[f];a||(a=this.g[f]=[],this.h++);var g;a:{for(g=0;g<a.length;++g){var h=a[g];if(!h.h&&h.listener==b&&h.capture==!!d&&h.i==e)break a}g=-1}-1<g?(b=a[g],c||(b.o=!1)):(b=new fb(b,this.src,f,!!d,e),b.o=c,a.push(b));return b};var U="closure_lm_"+(1E6*Math.random()|0),V={},hb=0;function ib(a,b,c,d,e){if(d&&d.once)return jb(a,b,c,d,e);if(Array.isArray(b)){for(var f=0;f<b.length;f++)ib(a,b[f],c,d,e);return null}c=kb(c);return a&&a[S]?a.g(b,c,q(d)?!!d.capture:!!d,e):lb(a,b,c,!1,d,e)}
function lb(a,b,c,d,e,f){if(!b)throw Error("Invalid event type");var g=q(e)?!!e.capture:!!e,h=mb(a);h||(a[U]=h=new T(a));c=h.add(b,c,d,g,f);if(c.g)return c;d=nb();c.g=d;d.src=a;d.listener=c;if(a.addEventListener)cb||(e=g),void 0===e&&(e=!1),a.addEventListener(b.toString(),d,e);else if(a.attachEvent)a.attachEvent(ob(b.toString()),d);else if(a.addListener&&a.removeListener)a.addListener(d);else throw Error("addEventListener and attachEvent are unavailable.");hb++;return c}
function nb(){function a(c){return b.call(a.src,a.listener,c)}var b=pb;return a}function jb(a,b,c,d,e){if(Array.isArray(b)){for(var f=0;f<b.length;f++)jb(a,b[f],c,d,e);return null}c=kb(c);return a&&a[S]?a.h(b,c,q(d)?!!d.capture:!!d,e):lb(a,b,c,!0,d,e)}
function qb(a){if("number"!==typeof a&&a&&!a.h){var b=a.src;if(b&&b[S])b.i(a);else{var c=a.type,d=a.g;b.removeEventListener?b.removeEventListener(c,d,a.capture):b.detachEvent?b.detachEvent(ob(c),d):b.addListener&&b.removeListener&&b.removeListener(d);hb--;if(c=mb(b)){d=a.type;if(d in c.g){var e=c.g[d],f=Ea(e,a),g;(g=0<=f)&&Array.prototype.splice.call(e,f,1);g&&(gb(a),0==c.g[d].length&&(delete c.g[d],c.h--))}0==c.h&&(c.src=null,b[U]=null)}else gb(a)}}}
function ob(a){return a in V?V[a]:V[a]="on"+a}function pb(a,b){if(a.h)a=!0;else{b=new R(b,this);var c=a.listener,d=a.i||a.src;a.o&&qb(a);a=c.call(d,b)}return a}function mb(a){a=a[U];return a instanceof T?a:null}var rb="__closure_events_fn_"+(1E9*Math.random()>>>0);function kb(a){if("function"===typeof a)return a;a[rb]||(a[rb]=function(b){return a.handleEvent(b)});return a[rb]};function W(a){P.call(this);this.l=a;this.i={}}ka(W,P);var sb=[];function tb(a){Oa(a.i,function(b,c){this.i.hasOwnProperty(c)&&qb(b)},a);a.i={}}W.prototype.j=function(){W.m.j.call(this);tb(this)};W.prototype.handleEvent=function(){throw Error("EventHandler.handleEvent not implemented");};function ub(a,b,c){b=void 0===b?!1:b;c=void 0===c?!1:c;P.call(this);this.i=a||document.body;this.s=!!b;this.A=!!c;this.l=new W(this);a=ja(bb,this.l);this.h?a():(this.g||(this.g=[]),this.g.push(a));a=this.l;b=this.i;c=this.B;var d="click";Array.isArray(d)||(d&&(sb[0]=d.toString()),d=sb);for(var e=0;e<d.length;e++){var f=ib(b,d[e],c||a.handleEvent,!1,a.l||a);if(!f)break;a.i[f.key]=f}}m(ub,P);
ub.prototype.B=function(a){if(!(0!=a.h.button||ab&&a.ctrlKey||a.i))for(var b=a.target;b&&b!=this.i;){if(b.tagName&&"a"==b.tagName.toLowerCase()){var c=b.getAttribute("href")||b.getAttributeNS("http://www.w3.org/1999/xlink","href"),d=za(c);if(c!=d){a:{b=void 0;try{b=Aa(d)}catch(h){h=ra(h);if(h instanceof z){b=!1;break a}throw h.g;}var e;if(e=null!=b){e=(wa(),va);var f=ua;b=Object.is(e,f)||null==e&&null==f?b.toLocaleLowerCase():b.toLowerCase();e=".google.com"===b.substr(b.length-11|0,11)}b=e}if(!b)if(this.A){c=
za(d);if(Object.is(c,d)||null==c&&null==d)d="//www.google.com/url?q="+v(encodeURIComponent(d)),d=v(d)+"&sa=D";d+="&source=editors"}else d=this.s?c:d;f=d;b=void 0;d={target:"_blank",noreferrer:!0};c=window;if(f instanceof L)e=f;else{e="undefined"!=typeof f.href?f.href:String(f);if(!(e instanceof L))if(e="object"==typeof e&&e.h?e.g():String(e),Ta.test(e))e=new L(e,M);else{e=String(e);e=e.replace(/(%0A|%0D)/g,"");var g=e.match(Sa);e=g&&Ra.test(g[1])?new L(e,M):null}e=e||Va}f=d.target||f.target;g=[];
for(b in d)switch(b){case "width":case "height":case "top":case "left":g.push(b+"="+d[b]);break;case "target":case "noopener":case "noreferrer":break;default:g.push(b+"="+(d[b]?1:0))}b=g.join(",");if((I("iPhone")&&!I("iPod")&&!I("iPad")||I("iPad")||I("iPod"))&&c.navigator&&c.navigator.standalone&&f&&"_self"!=f)b="A",g=document,b=String(b),"application/xhtml+xml"===g.contentType&&(b=b.toLowerCase()),g=b=g.createElement(b),e=e instanceof L?e:Ua(e),g.href=N(e),b.setAttribute("target",f),d.noreferrer&&
b.setAttribute("rel","noreferrer"),d=document.createEvent("MouseEvent"),d.initMouseEvent("click",!0,!0,c,1),b.dispatchEvent(d);else if(d.noreferrer){if(c=Xa("",c,f,b),d=N(e),c){Za&&-1!=d.indexOf(";")&&(d="'"+d.replace(/'/g,"%27")+"'");c.opener=null;La.test(d)&&(-1!=d.indexOf("&")&&(d=d.replace(Fa,"&amp;")),-1!=d.indexOf("<")&&(d=d.replace(Ga,"&lt;")),-1!=d.indexOf(">")&&(d=d.replace(Ha,"&gt;")),-1!=d.indexOf('"')&&(d=d.replace(Ia,"&quot;")),-1!=d.indexOf("'")&&(d=d.replace(Ja,"&#39;")),-1!=d.indexOf("\x00")&&
(d=d.replace(Ka,"&#0;")));d='<meta name="referrer" content="no-referrer"><meta http-equiv="refresh" content="0; url='+d+'">';if(void 0===J)if(b=null,(e=n.trustedTypes)&&e.createPolicy){try{b=e.createPolicy("goog#html",{createHTML:r,createScript:r,createScriptURL:r})}catch(h){n.console&&n.console.error(h.message)}J=b}else J=b;d=(b=J)?b.createHTML(d):d;d=new O(d,null,Wa);(c=c.document)&&c.write&&(c.write(d instanceof O&&d.constructor===O?d.i:"type_error:SafeHtml"),c.close())}}else(c=Xa(e,c,f,b))&&d.noopener&&
(c.opener=null);a.g();break}}b=b.parentNode}};function vb(a,b,c){new ub(a,void 0===b?!1:b,void 0===c?!1:c)}var X=["DOCS_installLinkReferrerSanitizer"],Y=n;X[0]in Y||"undefined"==typeof Y.execScript||Y.execScript("var "+X[0]);for(var Z;X.length&&(Z=X.shift());)X.length||void 0===vb?Y[Z]&&Y[Z]!==Object.prototype[Z]?Y=Y[Z]:Y=Y[Z]={}:Y[Z]=vb;}).call(this);
</script><script type="text/javascript" nonce="">DOCS_installLinkReferrerSanitizer( undefined,  true,  false );</script></body></html>